import * as React from 'react';
import { forwardRef } from 'react';
import TitleHeader from '../title-header/title-header';
import CongestionLevel from '../congestion-level/congestion-level';
import './index.scss';

export interface TrafficSituationProps {
  className?: string;
  style?: React.CSSProperties;
  width?: number | string;
  height?: number | string;
  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;
  /**
   * 标题配置
   */
  titleHeader?: {
    title?: string;
  };
  /**
   * 拥堵等级配置
   */
  congestionLevels?: {
    level1?: {
      title?: string;
      level?: string;
      showIcon?: boolean;
      iconPath?: string;
      backgroundImage?: string;
    };
    level2?: {
      title?: string;
      level?: string;
      showIcon?: boolean;
      iconPath?: string;
      backgroundImage?: string;
    };
    level3?: {
      title?: string;
      level?: string;
      showIcon?: boolean;
      iconPath?: string;
      backgroundImage?: string;
    };
    level4?: {
      title?: string;
      level?: string;
      showIcon?: boolean;
      iconPath?: string;
      backgroundImage?: string;
    };
    level5?: {
      title?: string;
      level?: string;
      showIcon?: boolean;
      iconPath?: string;
      backgroundImage?: string;
    };
  };

  __designMode?: boolean;
}

const TrafficSituation = forwardRef<HTMLDivElement, TrafficSituationProps>(({
  className = '',
  style = {},
  width,
  height,
  noResponsiveScale = true,
  titleHeader = {},
  congestionLevels = {},

  __designMode,
  ...otherProps
}, ref) => {
  const combinedClassName = `traffic-situation ${className}`.trim();
  const customStyle: React.CSSProperties = { ...style };

  // 只在设计模式下应用宽高属性，避免覆盖CSS缩放
  if (__designMode && width) {
    customStyle.width = typeof width === 'number' ? `${width}px` : width;
  }
  if (__designMode && height) {
    customStyle.height = typeof height === 'number' ? `${height}px` : height;
  }

  // 构建类名，包含响应式缩放控制
  const finalClassName = [
    combinedClassName,
    noResponsiveScale ? 'no-responsive-scale' : ''
  ].filter(Boolean).join(' ');

  return (
    <div 
      ref={ref} 
      className={finalClassName} 
      style={customStyle} 
      {...otherProps}
    >
      <TitleHeader
        title={titleHeader.title || "周边交通情况"}
        noResponsiveScale={noResponsiveScale}
      />
      <div className="traffic-situation-content">
        <div className="congestion-levels-container">
          {/* 第一行：3个拥堵等级 */}
          <div className="congestion-row first-row">
            <CongestionLevel
              title={congestionLevels.level1?.title || "南北平台拥堵等级"}
              level={{ value: congestionLevels.level1?.level || "1.5" }}
              showIcon={congestionLevels.level1?.showIcon !== false}
              iconPath={congestionLevels.level1?.iconPath}
              levelBoxBackground={congestionLevels.level1?.backgroundImage}
              noResponsiveScale={noResponsiveScale}
            />
            <CongestionLevel
              title={congestionLevels.level2?.title || "东西平台拥堵等级"}
              level={{ value: congestionLevels.level2?.level || "2.1" }}
              showIcon={congestionLevels.level2?.showIcon !== false}
              iconPath={congestionLevels.level2?.iconPath}
              levelBoxBackground={congestionLevels.level2?.backgroundImage}
              noResponsiveScale={noResponsiveScale}
            />
            <CongestionLevel
              title={congestionLevels.level3?.title || "中央广场拥堵等级"}
              level={{ value: congestionLevels.level3?.level || "1.8" }}
              showIcon={congestionLevels.level3?.showIcon !== false}
              iconPath={congestionLevels.level3?.iconPath}
              levelBoxBackground={congestionLevels.level3?.backgroundImage}
              noResponsiveScale={noResponsiveScale}
            />
          </div>
          {/* 第二行：2个拥堵等级 */}
          <div className="congestion-row second-row">
            <CongestionLevel
              title={congestionLevels.level4?.title || "北广场拥堵等级"}
              level={{ value: congestionLevels.level4?.level || "2.3" }}
              showIcon={congestionLevels.level4?.showIcon !== false}
              iconPath={congestionLevels.level4?.iconPath}
              levelBoxBackground={congestionLevels.level4?.backgroundImage}
              noResponsiveScale={noResponsiveScale}
            />
            <CongestionLevel
              title={congestionLevels.level5?.title || "南广场拥堵等级"}
              level={{ value: congestionLevels.level5?.level || "1.9" }}
              showIcon={congestionLevels.level5?.showIcon !== false}
              iconPath={congestionLevels.level5?.iconPath}
              levelBoxBackground={congestionLevels.level5?.backgroundImage}
              noResponsiveScale={noResponsiveScale}
            />
          </div>
        </div>
      </div>
    </div>
  );
});

TrafficSituation.displayName = 'TrafficSituation';

export default TrafficSituation; 